<template>
	<view class="course">
		<view class="header">
			<view class="img">
				<image :src="query.avatar" mode="aspectFill" class="avater"></image>
			</view>
			<view class="right">
				<view class="title">
					{{query.nickname}}
				</view>
				<view class="bottom">
					<image
						:src="!query.gender ?$IMG_URL('/static/mannager/girl.png'):$IMG_URL('/static/mannager/boy.png')"
						mode="" class="sex"></image>
					<view class="size">
						{{query.gender == 1 ?'男':'女'}}
					</view>
					<view class="gang">

					</view>
					<view class="size">
						{{query.age + '岁'}}
					</view>
				</view>
			</view>
		</view>
		<view class="tab">
			<view v-for="(item,index) in tabList" :key="index" class="tabIndex" @click="changeIndex(index)">
				<view :class="activeIndex == index ?'tabsize1':'tabsize2'">
					{{item}}
				</view>
				<view class="active">
					<view class="empty" v-if="activeIndex == index">
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="comlum_Y" v-if="list.length">
				<view v-for="(item,index) in list" :key="index" class="Item">
					<view class="top">
						<image :src="item.image" mode="aspectFill" class="img"></image>
						<view class="top_right">
							<view class="name">
								{{item.title}}
							</view>
							<view class="content">
								{{item.intro}}
							</view>
							<view class="row23">
								<view v-for="(childItem,childIndex) in item.label_list" :key="childIndex"
									class="childItem">
									{{childItem.title}}
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view class="left" v-if="!activeIndex">
								<text class="color1">第</text>
								<text class="color2">{{item.ynmt}}</text>
								<text class="color1">丨共{{item.classes}}节</text>
							</view>
							<view class="left" v-else>
								<text class="color1">已完成{{item.classes}}节</text>
							</view>
						</view>
						<view class="btn" @click="routeRecord(item, index)">
							上课记录
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<empty v-else :content="!activeIndex?'进行中课程':'已完成课程'"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import {
		coachstudentmain
	} from '@/api/coach.js'
	import empty from './components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				initer: {
					user_id: '',
					form: 'unfinished',
					page: ''
				},
				query: {},
				// 导航
				tabList: [
					'进行中(0)',
					'已完成(0)'
				],
				activeIndex: 0,
				list: [],
				status: 'loadmore', //当前状态
			}
		},
		onLoad(e) {
			this.initer.user_id = e.user_id
			this.getCoachstudentmain()
		},
		methods: {
			getCoachstudentmain() {
				coachstudentmain(this.initer).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.query = res.data.user_info
						this.tabList[0] = '进行中(' + res.data.unfinished_num + ')'
						this.tabList[1] = '已完成(' + res.data.finish_num + ')'
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.list = this.list.concat(res.data.list)
						}

						console.log('list', this.list);
					}
				})
			},
			changeIndex(index) {
				if (this.activeIndex != index) {
					if (!index) {
						this.initer.form = 'unfinished'
					} else {
						this.initer.form = 'finish'
					}
					this.activeIndex = index
					this.list = []
					this.initer.page = 1
					this.getCoachstudentmain()
				}
			},
			routeRecord(item, index) {
				uni.navigateTo({
					url: 'record?my_course_id=' + item.my_course_id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.course {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		width: 750rpx;
		height: 176rpx;
		background: #ffffff;
		padding: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.img {
			width: 80rpx;
			height: 80rpx;
			background: #f6f6f6;
			border-radius: 50%;
			margin-right: 20rpx;

			.avater {
				width: 100%;
				height: 100%;
			}


		}

		.right {
			display: flex;
			flex-direction: column;
			flex: 1;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}

			.bottom {
				margin-top: 12rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.sex {
					margin-right: 8rpx;
					width: 26rpx;
					height: 26rpx;
				}

				.size {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
				}

				.gang {
					width: 0rpx;
					height: 24rpx;
					border: 1rpx solid #666666;
					margin: 0 10rpx;
				}
			}
		}
	}

	.tab {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		background: #ffffff;

		.tabIndex {
			display: flex;
			flex-direction: column;
			align-items: center;

			.tabsize1 {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Heavy;
				font-weight: 800;
				text-align: center;
				color: #73F0EA;
				letter-spacing: 0.7rpx;

			}

			.tabsize2 {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #666666;
				letter-spacing: 0.7rpx;

			}

			.active {
				margin-top: 12rpx;
				width: 44rpx;
				height: 8rpx;

				.empty {
					width: 100%;
					height: 100%;
					background: #73F0EA;
					border: 2rpx solid rgba(0, 0, 0, 0.00);
					border-radius: 2rpx;
				}
			}
		}
	}

	.scroll-Y {
		width: 100%;
		height: 80vh;

		.comlum_Y {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 24rpx;

			.Item {
				width: 702rpx;
				height: 280rpx;
				background: #ffffff;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top {
					display: flex;
					flex-direction: row;
					width: 100%;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #e9e9e9;

					.img {
						width: 160rpx;
						height: 120rpx;
						background: rgba(0, 0, 0, 0.00);
						border-radius: 16rpx;
						margin-right: 20rpx;
					}

					.top_right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.name {
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
							margin-bottom: 2rpx;
						}

						.content {
							width: 500rpx;
							/* 设置容器的宽度 */
							white-space: nowrap;
							/* 防止内容换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 显示省略号 */
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}

						.row23 {
							display: flex;
							flex-direction: row;
							align-items: center;

							.childItem {
								margin-right: 6rpx;
								padding: 0 6rpx;
								height: 28rpx;
								background: #ededed;
								border-radius: 4rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #666666;
							}
						}
					}
				}

				.bottom {
					width: 100%;
					padding-top: 26rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						flex: 1;

						.color1 {
							color: #999999;
						}

						.color2 {
							color: #73F0EA;
						}
					}

					.btn {
						width: 152rpx;
						height: 64rpx;
						background: #73F0EA;
						border: 1rpx solid #73F0EA;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: center;
						color: #ffffff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>